    <div class="layui-layout layui-layout-admin">
        {{render "public/header.html"}}
        {{$addr := .client.Addr}}

        {{render "public/menu.html"}}


        <div class="layui-body layui-content">
            <!-- 内容主体区域 -->
            <div class="layui-breadcrumb">
                <a href="/">主页</a>
                <a>
                    <cite>计划任务列表</cite>
                </a>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select lay-filter="select-menu">
                        {{range $k,$v := .clientList}}
                            {{if eq $v.State 1}}
                                <option value="{{$v.Addr}}" {{if eq $v.Addr $addr}}selected{{end}}>{{$v.Addr}}</option>
                            {{end}}
                        {{end}}
                           
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn jia-btn-normal" id="start-script">启动</button>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-danger" id="stop-script">停止</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block layui-layout-right">
                        <a href="/crontab/task/edit?addr={{.addr}}" class="layui-btn jia-btn-normal">添加</a>
                    </div>
                </div>
            </div>

            <div class="layui-card layui-only-select" style="min-height: 284px;">
                <div class="layui-card-header">运行列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="taskTableId" lay-filter="taskTable"></table>
                    <div class="layui-hide txt-center" id="no-data">暂无数据</div>
                </div>
            </div>
        </div>
        

        {{render "public/footer.html"}}
    </div>
    <script src="/static/lib/layui/layui.js"></script>
    <script>
        //config的设置是全局的
        layui.config({
            base: '/static/js/' //假设这是你存放拓展模块的根目录
        })
        layui.use(['common', 'element', 'form', 'table', 'jquery'], function () {
            var common = layui.common;
            var form = layui.form;
            var element = layui.element;
            var carousel = layui.carousel;
            var table = layui.table;
            var $ = layui.jquery;

            var tableCols = [[ //表头
                {type:'checkbox', fixed: 'left'},
                {field: 'ID', width:60, sort: true, fixed: 'left', title: 'ID'},
                {field:'Name', width:170, fixed: 'left', title: '名称'},
                {field:'Command', width:170, title: '脚本', templet: function(d) {
                    var oldStr = d.Command + ' ' + d.Args;
                    newStr = oldStr.replace(/(.{0,20}).*/g,"$1")
                    if (oldStr.length > newStr.length) {
                        newStr += "..."
                    }
                    return newStr
                }},
                {field:'State', width:90, title: '状态', templet: function(d){
                    var staticHtml = '';
                    if (d.State === 0) {
                        staticHtml = '<a href="#" class="layui-btn layui-btn-xs layui-btn-danger">已停止</a>';
                    } else if (d.NumberProcess > 0) {
                        staticHtml = '<a href="#" class="layui-btn layui-btn-xs jia-btn-normal">运行中</a>'
                    } else {
                        staticHtml = '<a href="#" class="layui-btn layui-btn-xs layui-btn-normal">计时中</a>'
                    }
                    return staticHtml;
                }},
                {field:'Create', width:170, title: '创建日期', sort: true, templet: function(d) {
                    return common.timestampToTime(d.Create);
                }},
                {field:'LastExecTime', width:170, title: '上次启动', sort: true, templet: function(d) {
                    return common.timestampToTime(d.LastExecTime);
                }},
                {field:'LastCostTime', width:170, sort: true, title: '上次花费', templet: function(d) {
                    return (d.LastCostTime / 1000000000).toFixed(3) + '秒';
                }},
                {field:'Timeout', width:120, sort: true, title: '超时'},
                {field:'OpTimeout', width:120, title: '超时触发'},
                {field:'NumberProcess', width:120, title: '进程/计时器', templet: function(d) {
                    return d.NumberProcess + '/' + d.TimerCounter;
                }},
                {field:'LastExitStatus', width:120, title: '上次执行', templet: function(d){
                    var lastExitHtml = '';
                    if (d.LastExitStatus == 'success') {
                        lastExitHtml = '<a href="#" class="layui-btn layui-btn-xs jia-btn-normal" >'+ d.LastExitStatus +'</a>';
                    } else if (d.LastExitStatus == '') {
                        lastExitHtml = '- -';
                    } else {
                        lastExitHtml = '<a href="#" class="layui-btn layui-btn-xs layui-btn-danger" >'+ d.LastExitStatus +'</a>';
                    }
                    return lastExitHtml;
                }},
                {field:'C', minWidth:200, title: '时间', templet: function(d) {
                    return '分:' + d.C.Minute + '时:' + d.C.Hour + '日:' + d.C.Day + '月:' + d.C.Month + '日/周:' + d.C.Weekday
                }},
                {field:'handle', width:140, fixed: 'right', title: '编辑', templet: function(d){
                    var isStartTask = '';
                    if (d.State == 0) {
                        isStartTask = '<a href="/crontab/task/start?taskId='+ d.ID +'&addr='+ common.getRequest().addr +'" class="layui-btn layui-btn-xs jia-btn-normal reset-btn">启动</a>';
                    } else {
                        isStartTask = '<a href="/crontab/task/stop?taskId='+ d.ID +'&addr='+ common.getRequest().addr +'&action=stop" class="layui-btn layui-btn-xs layui-btn-danger reset-btn">停止</a>';
                    }
                    var  editorHtml = isStartTask + '<div class="layui-input-inline" style="width: 70px;" lay-event="operate">' +
                                        '<select lay-filter="selectTable" id="'+ d.ID +'">' +
                                            '<option value="">操作</option>' +
                                            '<option value="修改计划任务">修改计划任务</option>' +
                                            '<option value="删除计划任务">删除计划任务</option>' +
                                            '<option value="手动执行任务">手动执行任务</option>' +
                                            '<option value="强杀脚本进程">强杀脚本进程</option>' +
                                            '<option value="查看最近日志">查看最近日志</option>' +
                                        '</select>' +
                                    '</div>';
                    return editorHtml;
                }}
            ]]

            $.ajax({
                type: 'POST',
                url: location.pathname,
                data: {
                    addr: common.getRequest().addr
                },
                success: function(res) {
                    var taskDatas = res.data.taskList;
                    if (taskDatas) {
                        table.render({
                            elem: '#taskTableId',
                            data: taskDatas,
                            cols: tableCols,
                            limit: taskDatas.length
                        });
                    } else {
                        $('#no-data').addClass('layui-show').removeClass('layui-hide');
                    }
                },
                error: function(error) {
                    console.log(error)
                }
            })

            // 监听top下拉框执行表格重载
            form.on('select(select-menu)', function (data) {
                window.location.href = '/crontab/task/list?addr=' + data.value;
            });

            /*监听表单里面的select框*/
            form.on('select(selectTable)', function (data) {
                var selectValue = data.value;
                var selectId = $(data.elem).context.getAttribute('id');
                if (selectValue == '修改计划任务') {
                    window.location.href = '/crontab/task/edit?taskId='+ selectId +'&addr=' + common.getRequest().addr;
                }
                if (selectValue == '删除计划任务') {
                    window.location.href = '/crontab/task/stop?taskId='+ selectId +'&addr=' + common.getRequest().addr + '&action=delete';
                }
                if (selectValue == '手动执行任务') {
                    window.location.href = '/crontab/task/quickStart?taskId='+ selectId +'&addr=' + common.getRequest().addr;
                }
                if (selectValue == '强杀脚本进程') {
                    window.location.href = '/crontab/task/stop?taskId='+ selectId +'&addr=' + common.getRequest().addr + '&action=kill';
                }
                if (selectValue == '查看最近日志') {
                    window.location.href = '/crontab/task/log?taskId='+ selectId +'&addr=' + common.getRequest().addr;
                }
                
            });

            $('#start-script').on('click', function () {
                var checkStatus = table.checkStatus('taskTableId');
                var checkData = checkStatus.data; //得到选中的数据
                var checkIdList = [];
                if(checkData.length === 0){
                    return layer.msg('请选择需要启动的脚本');
                }
                for (var i=0; i < checkData.length; i++) {
                    checkIdList.push(checkData[i].ID)
                }
                location.href = "/crontab/task/start?&taskId="+checkIdList.join(",") + '&addr=' + common.getRequest().addr;
                
            })
            $('#stop-script').on('click', function () {
                var checkStatus = table.checkStatus('taskTableId');
                var checkData = checkStatus.data; //得到选中的数据
                var checkIdList = [];
                if(checkData.length === 0){
                    return layer.msg('请选择需要启动的脚本');
                }
                for (var i=0; i < checkData.length; i++) {
                    checkIdList.push(checkData[i].ID)
                }
                location.href = "/crontab/task/stop?&taskId="+checkIdList.join(",") + '&addr=' + common.getRequest().addr + '&action=stop';
            })


            $('#flexible-icon').on('click', function () {
                if ($(this).hasClass('layui-icon-spread-left')) {
                    $(this).addClass('layui-icon-shrink-right').removeClass('layui-icon-spread-left');
                    $('.layui-layout-body').removeClass('min-layout');
                } else {
                    $(this).addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
                    $('.layui-layout-body').addClass('min-layout');
                }
            })

            if (window.innerWidth < 990) {
                $('.layui-layout-body').addClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
            }
            $(window).on('resize', function () {
                if (window.innerWidth < 990) {
                    $('.layui-layout-body').addClass('min-layout');
                    $('#flexible-icon').addClass('layui-icon-spread-left').removeClass(
                        'layui-icon-shrink-right');
                } else {
                    $('.layui-layout-body').removeClass('min-layout');
                    $('#flexible-icon').addClass('layui-icon-shrink-right').removeClass(
                        'layui-icon-spread-left');
                }
            })

        });
    </script>

